<!--
 * @Descripttion: 酒店差标配置
 * @version: 
 * @Author: 许国辉
 * @Date: 2022-12-05 21:57:09
 * @LastEditors: 许国辉
 * @LastEditTime: 2022-12-06 09:04:35
-->

<template>
  <a-row>
    <a-col span="24">
      <div style="margin: 0px 6px">
        <a-list :grid="{ gutter: 16, column: 4 }" :data-source="TravelStandardHotelList">
          <template #renderItem="{ item }">
            <a-list-item>
              <a-card
                :title="
                  item.cityLeave === 0 ? '一般城市' : item.cityLeave === 1 ? '一线城市' : '省会城市'
                "
              >
                <a-row>
                  <a-col span="24" style="text-align: left; background-color: red">
                    <a-input-number
                      v-model:value="item.costMax"
                      prefix="价格上限(￥) "
                      addon-after="RMB"
                      style="width: 100%"
                    />
                  </a-col>
                </a-row>
                <div style="height: 20px"></div>
                <a-row>
                  <a-col span="24" style="text-align: center">
                    <a-button
                      type="primary"
                      style="width: 90%"
                      @click="updateTravelStandardHotel(item)"
                      >提交</a-button
                    >
                  </a-col>
                </a-row>
              </a-card>
            </a-list-item>
          </template>
        </a-list>
      </div>
    </a-col>
  </a-row>
</template>
<script lang="ts">
  import { message } from 'ant-design-vue';
  import { defineComponent, onMounted, reactive, ref, watch } from 'vue';
  import {
    defaultTravelStandardHotelModelParamsModel,
    TravelStandardHotelModel,
    TravelStandardHotelModelParamsModel,
  } from '/@/api/travelCriterion/hotel/model/travelStandardHotel';
  import {
    getTravelStandardByHotel,
    updateTravelStandardByHotel,
  } from '/@/api/travelCriterion/hotel/travelStandardHotelAPI';
  export default defineComponent({
    components: {},
    props: {
      employeeLeave: {
        type: Number,
        required: true,
        default: () => 0,
      },
    },

    setup(props) {
      const employeeLeaveValue = ref('');
      const TravelStandardHotelList = ref(Array<TravelStandardHotelModel>());
      const travelStandardHotelModelParamsModel = ref<TravelStandardHotelModelParamsModel>(
        defaultTravelStandardHotelModelParamsModel,
      );
      const getTravelStandardByHotelList = async () => {
        travelStandardHotelModelParamsModel.value.empLeaveId = props.employeeLeave;
        await getTravelStandardByHotel(travelStandardHotelModelParamsModel.value)
          .then((data) => {
            //处理成功后的逻辑
            TravelStandardHotelList.value = data; //这个data 是接收的resolve参数--
          })
          .catch((err) => {
            console.log(err);
          });
      };

      const updateTravelStandardHotel = async (travelStandardHotel) => {
        await updateTravelStandardByHotel(travelStandardHotel)
          .then((data) => {
            if (data == 1) {
              message.success({
                content: () => '标准设置成功',
                class: 'custom-class',
                style: {
                  marginTop: '20vh',
                },
              });
            }
          })
          .catch((err) => {
            message.warning({
              content: () => '出现问题：' + err,
              class: 'custom-class',
              style: {
                marginTop: '20vh',
              },
            });
          });
      };

      watch(
        () => props.employeeLeave,
        (newV, prevV) => {
          setTimeout(() => {
            travelStandardHotelModelParamsModel.value.empLeaveId = newV;
            console.log(prevV);
            getTravelStandardByHotelList();
          }, 20);
        },
      );

      const radioStyle = reactive({
        margin: '8px 0px',
        display: 'block',
        height: '32px',
        lineHeight: '32px',
      });

      onMounted(() => {
        getTravelStandardByHotelList();
      });
      return {
        employeeLeaveValue,
        TravelStandardHotelList,
        radioStyle,
        updateTravelStandardHotel,
      };
    },
  });
</script>
